<template>
  <div class="wrap">
    <div class="item">
      <p class="name">请输入原密码</p>
      <div class="box">
        <input type="text" v-model="oldPassword" />
      </div>
    </div>
    <div class="item">
      <p class="name">请输入新密码</p>
      <div class="box">
        <input type="text" v-model="newPassword" />
      </div>
    </div>
    <div class="item">
      <p class="name">确认新密码</p>
      <div class="box">
        <input type="text" v-model="checkPassword" />
      </div>
    </div>
    <div class="item">
      <p class="name">请输入手机验证码</p>
      <div class="box">
        <input type="text" v-model="checkCode" style="width:140px;" />
        <span @click="send">{{ts}}</span>
      </div>
    </div>

    <p class="btn" @click="save">确定修改</p>
  </div>
</template>
<style lang="scss" scoped>
.item {
  width: 8.56rem;

  margin: 0.8rem auto 0;
  .name {
    color: #555;
    font-size: 0.48rem;
    text-align: left;
    margin-bottom: 0.266667rem;
  }
  .box {
    background: #eeeded;
    height: 1.066667rem;
    border-radius: 0.266667rem;
    display: flex;
    width: 100%;
    align-items: center;
  }
  input {
    border: none;
    outline: none;
    height: 100%;
    background: transparent;
    margin-left: 20px;
    font-size: 0.4rem;
    flex: 2;
  }
  span {
    padding: 4px 8px;
    color: #fff;
    font-size: 0.32rem;
    background: #719bef;
    border-radius: 0.266667rem;
    margin-right: 15px;
    width: 100px;
    display: block;
  }
}
.btn {
  width: 8.56rem;
  height: 1.066667rem;
  margin: 60px auto 0;
  background: #719bef;
  color: #fff;
  font-size: 0.48rem;
  text-align: center;
  line-height: 1.066667rem;
  border-radius: 0.266667rem;
}
</style>
<script>
import { updatePassword, findUserInfo, sendCode } from "@/utils/interface";
import { Dialog } from "vant";

export default {
  data() {
    return {
      oldPassword: "",
      newPassword: "",
      checkCode: "",
      checkPassword: "",
      phone: "",
      bok: true,
      ts: "发送验证码"
    };
  },
  methods: {
    findUserInfo() {
      findUserInfo().then(res => {
        this.phone = res.data.data.account;
        console.log(this.phone);
      });
    },
    send() {
      if (!this.bok) {
        return false;
      }
      this.bok = false;
      sendCode({
        account: this.phone
      }).then(res => {
        let n = 60;
        let timer = setInterval(() => {
          n--;
          this.ts = `${n}秒后重试`;
          if (n <= 0) {
            clearInterval(timer);
            this.ts = "重新获取";
            this.bok = true;
          }
        }, 1000);
      });
    },
    save() {
      if (!this.oldPassword) {
        Dialog.alert({
          message: "请输入原密码"
        });
        return false;
      }
      if (!this.newPassword) {
        Dialog.alert({
          message: "请输入新密码"
        });
        return false;
      }
      if (this.newPassword.length < 6) {
        Dialog.alert({
          message: "密码不能少于6位"
        });
        return false;
      }
      if (this.newPassword !== this.checkPassword) {
        Dialog.alert({
          message: "两次密码输入不一致"
        });
        return false;
      }
      if (!this.checkCode) {
        Dialog.alert({
          message: "请输入验证码"
        });
        return false;
      }
      updatePassword({
        oldPassword: this.oldPassword,
        newPassword: this.newPassword,
        checkCode: this.checkCode
      }).then(res => {
        if (res.data.code == 200) {
          Dialog.alert({
            message: "修改成功，请重新登陆"
          }).then(res => {
            localStorage.removeItem("shopwx");
            this.$router.replace("login");
          });
        }
      });
    }
  },
  created() {
    document.title="修改密码"
    this.findUserInfo();
  }
};
</script>